<template>
	<view class="">
		<!-- 筛选列表 -->
		<view class="filterbg" v-if="bg_flag" @tap="ableClose">
		</view>
		<view class="sl_filter">
			<view class="filter">
					<view
						:class="['filter_content', menuList_index == item.key ? 'filter_content_c' : '']"
						v-for="(item, index) in menuList"
						@click="select(item.key, index)"
						:key="index"
					>
						{{ item.title }}
						<i class="icon icono">&#xe650;</i>
						<i class="icon icont">&#xe64e;</i>
					</view>
				</view>
				<view class="filter_b_q" v-for="(item, index) in menuList" v-if="item.key == menuList_index">
					<view 
					:class="['filter_content_detail', items.flag ? 'filter_content_detail_c' : '']"
					 v-for="(items, key) in item.detaillist" @click="selectdetail(items, key)">
						{{ items.title }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				bg_flag:false,
				menuList_index: 0,
				selecetNavIndex:0,
				filterFrom:{
					type:'',
					multi:'',
					time_key:'',
					distance:'',
				},
			// 筛选列表
			menuList: [
				{
					title: '综合',
					key: '1-1',
					detaillist: [
						{
							title: '综合',
							value: '1-1-1',
							flag: true
						},
						{
							title: '热度',
							value: '1-1-2',
							flag: false
						},
						// {
						// 	title: '参与人数',
						// 	value: '1-1-3',
						// 	flag: false
						// }
					]
				},
				{
					title: '类型',
					key: '2-2',
					detaillist: [
						{
							title: '不限',
							value: '2-2-1',
							flag: true
						},
						{
							title: '赛事',
							value: '2-2-2',
							flag: false
						},
						{
							title: '活动',
							value: '2-2-3',
							flag: false
						},
						{
							title: '任务',
							value: '2-2-4',
							flag: false
						}
					]
				},
				{
					title: '日期',
					key: '3-3',
					detaillist: [
						{
							title: '默认',
							value: '3-3-1',
							flag: true
						},
						{
							title: '一周',
							value: '3-3-2',
							flag: false
						},
						{
							title: '一个月',
							value: '3-3-3',
							flag: false
						},
						{
							title: '三个月',
							value: '3-3-4',
							flag: false
						}
					]
				},
				{
					title: '距离',
					key: '4-4',
					detaillist: [
						{
							title: '默认',
							value: '4-4-1',
							flag: true
						},
						{
							title: '离我最近',
							value: '4-4-2',
							flag: false
						},
						{
							title: '离我最远',
							value: '4-4-3',
							flag: false
						}
					]
				}
			],
			}
		},
		methods: {
			ableClose () {
				this.bg_flag =false
				this.menuList_index = 0;
			},
			// 下拉筛选
			select(key, index) {
				this.selecetNavIndex = index;  // 一级下标
				if (this.menuList_index == key) {
					this.menuList_index = 0;
					this.bg_flag =false
					return;
				}
				this.menuList_index = key;
				this.bg_flag = true;
			},
			selectdetail(items, key) {
				if(!this.selecetNavIndex) {
					this.filterFrom.multi = key
				}else if(this.selecetNavIndex == 1) {
					this.filterFrom.type = key
				}else if(this.selecetNavIndex == 2) {
					this.filterFrom.time_key = key
				}else if(this.selecetNavIndex == 3) {
					this.filterFrom.distance = key
				}
				 // console.log (this.filterFrom)
				this.$emit('change',this.filterFrom)
				//  // console.log (items,key)
				this.menuList[this.selecetNavIndex].detaillist.forEach(item => {
					item.flag = false;
				});
				this.menuList[this.selecetNavIndex].detaillist[key].flag = !this.menuList[this.selecetNavIndex].detaillist[key].flag;
				this.detail_index = items.value;
				this.menuList_index = 0;
				// 设置标题上的文字
				this.menuList[this.selecetNavIndex].title = items.title;
				if (!key) {
					if (this.menuList[this.selecetNavIndex].key == '1-1') {
						this.menuList[this.selecetNavIndex].title = '综合';
					} else if (this.menuList[this.selecetNavIndex].key == '2-2') {
						this.menuList[this.selecetNavIndex].title = '类型';
					} else if (this.menuList[this.selecetNavIndex].key == '3-3') {
						this.menuList[this.selecetNavIndex].title = '时间';
					} else {
						this.menuList[this.selecetNavIndex].title = '距离';
					}
				}
				this.bg_flag = false
			},
		}
	}
</script>

<style lang="less" scoped>
	
	.sl_filter {
		background-color: #FFFFFF;
		width: 100%;
		margin-bottom: 10upx;
		position: relative;
	}
	.filterbg {
		position: absolute;
		top: 200upx;
		left: 0;
		width: 100%;
		height: calc(100% - 10upx);
		z-index: 8;
		background-color: rgba(0,0,0,0.3);
	}
	.filter_b_q {
		position: absolute;
		top: 100%;
		left: 0;
		padding: 0 30upx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		height: 120upx ;
		background-color: #FFFFFF;
		z-index: 9;
		align-items: center;
		border-top: 8upx solid #e1e1e1;
		.filter_content_detail {
			height: 52upx;
			width: 180upx;
			box-sizing: border-box;
			// border: 2upx solid #e1e1e1;
			background-color: #F9F9F9;
			font-size: 28upx;
			border-radius: 8upx;
			color: #666666;
			margin-right: 20upx;
			text-align: center;
			line-height:52upx;
		}
		.filter_content_detail_c {
			background-color: #8938d3;
			color: #FFFFFF;
		}
	}
	.filter {
		display: flex;
		justify-content: space-around;
		height: 84upx;
		width: 100%;
		border-top:  2upx solid #e1e1e1;
		box-sizing: border-box;
		align-items: center;
		.filter_content {
			height: 32upx;
			font-size: 28upx;
			color: #333333;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 2upx solid #e1e1e1;
			.icon {
				font-size: 12upx;
				color: #666666;
				margin-left: 4upx;
				margin-top: 4upx;
			}
			.icont {
				display: none;
			}
		}
		.filter_content:last-child {
			border-right: 0;
		}
		.filter_content_c {
			color: #8938d3;
			.icon {
				color: #8938d3;
				display: none;
			}
			.icont {
				display: block;
			}
		
		}
	}
	.filter_b {
		padding: 0 30upx;
		box-sizing: border-box;
		display: flex;
		height: 80upx ;
		align-items: center;
		.filter_content_detail {
			height: 52upx;
			width: 180upx;
			box-sizing: border-box;
			border: 2upx solid #e1e1e1;
			font-size: 28upx;
			color: #666666;
			margin-right: 20upx;
			border-radius: 30upx;
			text-align: center;
			line-height: 48upx;
		}
		.filter_content_detail_c {
			border: 2upx solid #8938d3;
			color: #8938d3;
		}
	}
</style>
